<template>
  <div class="header">
    <img alt="Vue logo" src="@/assets/images/login-logo.png" />
    <div class="toright">
      <img :src="imageUrl" alt="" class="avater" />
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <a href="/teacher/teacherset">账号设置</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a href="/login" @click="exitSave">安全退出</a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: @width;
  height: @rowheight;
  line-height: @rowheight;
  display: flex;
  padding-right: 130px;
  padding-left: 130px;
  background-color: #fff;
  border-bottom: 1px solid rgba(128, 128, 128, 0.237);
  & img {
    width: 130px;
    height: 40px;
    margin: 8px 15px 0 15px;
  }
  & a {
    padding: @pd;
    font-size: 16px;
    font-weight: bold;
  }
  & .toright {
    margin-left: auto;
    & .avater {
      position: relative;
      width: 24px;
      height: 24px;
      top: 5px;
      border-radius: 50%;
    }

    & a {
      padding-bottom: 22px;
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      teacherData: "",
      userName: "",
      imageUrl: "",
      
    };
  },
  mounted() {
    this.teacherData = JSON.parse(sessionStorage.getItem("teacherData"));
    if (this.teacherData != null) {
      this.userName = this.teacherData.tname;
      this.imageUrl = this.teacherData.avater;
    }
  },
  methods: {
    exitSave() {
      sessionStorage.removeItem("teacherData");
    },
  },
};
</script>